Using VoiceOver to Read & Audit a Page
On this page
You may need to adjust your Safari settings and OSX System Preferences to allow tabbing to all interactive controls: visit Safari > Preferences > Advanced and System Preferences > Keyboard > Shortcuts.
Open up the CampSpots homepage, then launch VoiceOver by using Fn + CMD + F5 (On a Mac desktop keyboard, you can omit the Fn key.)
You can hit CTRL at any time to get VoiceOver to stop reading.
Navigate Interactive Elements with the Tab Key
The Tab key will move between the focusable elements on the page. VoiceOver will announce the role and name of the element (if it has one) along with what’s inside of it.
For example, when you Tab into the MegaNav, VoiceOver will announce a “Navigation” role because of the nav element we used.
Think back to the tabbing experience you had at the beginning of the workshop. Recognize how different the screen reader experience would have been before any issues were remediated!
Video Transcript
So for screen reader testing, let's, let's do some demoing, shall we? So we, we know that safari is a popular browser for using voiceover, so it it's going to behave slightly differently than Chrome. And really the idea here is that we want things to be announced with accessibility information.
We want things to be interactive with the screen reader and a lot of the things that we've done for keyboard testing, we can kind of layer on screen reader usage on top of it. So things that are focusable and interactive for keyboards screen reader usage will kind of piggyback on that, but it also has the added thing that we need semantic accessibility information, so that when I focus on an element with a screen reader, I know what it is.
I know it state it's in. So we've done a lot of keyboard stuff so far. We haven't really done anything to make the screen reader better. So let's, let's take a look. I'm in fire up voiceover using my keyboard. I'm gonna say function command F five voiceover on safari cam spot's window cam spot's web content has keyboard focus, and I can hit the control key at any time to get voiceover to stop reading, which is a good trick to know sometimes when it's just it's yapping at you and you're trying to present, or you're trying to like catch your breath for a second on the Mac.
If you hit the control key, it will stop reading something. I wish I knew earlier. I'm gonna lower the volume, slightly application, 77.7% 58.6 safari camp's window. Okay. Hit control again. Get it. Stop reading. So the first thing I wanna mention is that we have a few different ways of navigating the tab.
Key is one, but it's not the only one. So tab will reach interactive controls that we have wired up with for the keyboard. So things like buttons, links, inputs, anything with the tab index of zero or yeah, we're, I'm not gonna spill the beans quite yet on tab index, but that is another way to get things into the tab order.
But interactive things from the keyboard are reachable with the tab keys. So if I hit tab, we can go through our mega menu with the screen reader, visited link camp spots, banner plan, your trip button navigation. So some things I'm picking up. So on our camp, spot's logo banner, it's kind of announcing not only the element that we're on, but what it's inside of.
So it's inside of that header banner. So it's kind of giving us a picture of the semantic structure around the elements that we're on, including the plan, your trip button that we're on right now. It says navigation that's because it's inside of a nav landmark. So all the accessibility information that we put in throughout all of our page structure, it ends up being rich information.
That's communicated kind of further down the dorm tree. So I'm gonna keep navigating a little bit. I'm gonna use this mega menu and we'll identify some opportunities of things that we can improve to make this more intuitive. If you can't see the screen. So starting with the enter key to toggle the mega menu, I don't hear anything.
Do you I hit the enter key and I'm still on the same button. Nothing is happening to tell me that this mega menu, even that there is a mega menu attached or that it's opening or closing, I can get into these items, link, find a camping spot, link events, you, and there's really no structure within the links inside of the, the sub menu.
It would be nice if those were structured to have more semantics, like maybe some, some lists and headings that could tell me a lot more about the structure without having to see it. But at least it's working with the keyboard. It's just, it could benefit from more accessibility information. Our escape key will still work.
So if I hit escape plan your trip button, you are currently, it takes me back to where I was and I can keep going through the menu in a similar fashion ways to stay button resources, button. So there's, you know, these top level buttons, but it's unclear that they have behavior kind of attached to them.
They're just random buttons. So if I was just kind of going by these items and I couldn't see the screen, I would miss the fact that there are mega menu items here. So let's keep going throughout the page. And I'm gonna use another way of navigating, which is the arrow keys. So I can navigate with arrows to go through content sequentially that may or may not be interactive resources.
So now I'm on the text within the re the mega menu button link login. You are currently on a text element where to you are currently on a text element, new line, try Oregon, edit text, try Oregon, Colorado edit text dates, enter dates, edit a text, new line search button, a festival of tense image. Rest in relaxation is a part of life.
Enter dates, edit text blank, enter dates. You are current search button, you new line, a festival of tens image rest and relaxation is a part of life. We know you need a break, get out of town or heading level two. Rest in relaxation is a part of. We know you need a break get out so I can navigate by arrow keys.
And sometimes I will. Because I know that there's other ways of navigating than just tab.
Navigate Static & Interactive Content with the Arrow Keys
Using the Arrow keys with VoiceOver running will cycle you through both static and interactive content on the page, at varying levels.
Sometimes up and down Arrow key navigation will result in getting stuck in a focusable control like an input. When this happens, I either Tab to the next item, use another VoiceOver key shortcut, click elsewhere on the screen, or bail out of VoiceOver altogether.
These are my solutions as someone who is not a day-to-day screen reader user. This also highlights an important thing to remember: feedback from daily screen reader users is necessary when designing and developing accessible user interfaces.
The VoiceOver Activation Key
There’s a special “VoiceOver Key” that is used as a shortcut for triggering additional functionality. By default, the VoiceOver Key (or “VO” as it is sometimes called) is set to the CTRL + Option combo.
For example, hitting CTRL + Option + H while VoiceOver is running will cycle through the headings on a page.
There are many other keyboard shortcuts to navigate through various parts of a webpage. There is definitely a learning curve when getting used to VoiceOver!
The VoiceOver Shortcut Cheatsheet from Deque University is a handy resource to bookmark and/or print out for your work station.
Navigate with the VoiceOver Rotor
With VoiceOver running, hit CTRL + Option + U on your keyboard to open the VoiceOver Rotor.
With the VoiceOver Rotor open, use the right Arrow key to navigate to the next window of options for reading.
In most configurations, VoiceOver will read out the Form Controls menu. Continue cycling to hear Landmarks, Buttons, Images, and Links. These sections are also configurable in the VoiceOver settings.
If there are multiple items featured in the current window of the VoiceOver Rotor, use the up and down arrows to cycle through them and the Enter key to move to that piece of content on the page.
Video Transcript
So we don't need to make everything interactive for a screen reader to reach it. Because we can navigate with the arrow keys we can navigate by headings. That's where my cheat sheet comes in. So for reading headings, let's see next heading.
So in voiceover we do have the voiceover key as we call it, which is control and option. So if I hold control and option and command, H I can cycle through headings, heading level three places to visit last heading, heading level three places to visit. So that was the last heading on the page. If I jump all the way to the top mission control, oops, safari camp spots.
Wow. That's a fancy sound safari camp spots, window heading level three places to visit you are currently on a heading level three. So I need a way to get all the way to the top. That's where my my cheat sheets come. So in handy. So depending on when I pull these out, you know, I, I wanna start to the top of the page.
So top of the page is function VO. So control option function, which is on my laptop, keyboard and left arrow, where to where to, that's only getting me part of the way up and I don't have a home key. So where to, yeah. That doesn't seem to work the way that it says on my cheat sheet. That's okay. So we've, we've navigated a few different ways.
We've used heading shortcuts. I was already pretty far down the page, so it only got me the, that H three heading, but there's another way that I can pull up all of the headings.
So I'm gonna try to open the rotor, which is a really handy way of navigating. I can do control option U landmarks menu. So the rotor is awesome.
It pulls up collections of elements, and I can see kind of at a glance, what are all the items on the page? So right now we're looking at landmarks. We have our banner, our nav, our main, and that footer that I called content info. When we added those landmarks, it wasn't just to satisfy the, a extension. It was to add these elements that are really helpful for screen reader navigation.
So in our rotor, we can look at all the landmarks. If I use my right arrow, key buttons menu, we've got our buttons, which actually have labels now of search. We added that a label that the function of that was to label it for a screen reader, images, menu. We have images only the ones that actually have alt text.
So the ones that we gave an empty alt attribute to were we marked as decorative. They get skipped over cuz they were, we were just skipping over those cuz they're mostly presentational window spots, menu window spots, who knows what those are, links menu we have these links. So this is kind of interesting.
Our li links list has these little icons before the text. So if I arrow down through them, visited link, camp spots, link login, link, modify your letter, circumflex accent, New York link modify your letter, circumflex X accent, Texas kind of don't think the Modi letter circumflex needs to be there. So it's decorative, right?
That's part of our little bullet list style. So one thing we could do is go through and make that like hide it from the screen reader, cuz it doesn't need to be read aloud. It's a bunch of extra characters that be, and it precedes the words. So it kind of gets in the way of us knowing what the actual link text is.
So we could go clear that off of there and improve the experience. I'll keep arrowing right through the rotor heading's menu. Here's our headings. So heading levels one, two and three. So we can use our web developer toolbar extension. We can also use the voiceover rotor.
The N VDA screen reader has something called the elements list.
That's also very helpful. And so we can check our heading levels using the rotor, which I think is really cool and form controls, menu form controls. So anything that, you know, buttons, inputs, text areas, all that stuff shows up under form controls, landmarks menu, and back to landmarks. So we could add a few more landmarks, something we could do while we're in there is mark up content kind of within the main content area with sections and I'll show you kind of a trick to getting those, to work with voiceover.
So that's the voiceover rotor. I use that all the time to kind of check what's going on with headings, especially if I get into some of the edge cases with the web developer toolbar, where maybe it's not respecting CSS display styles or there's some kind of funky cases that they haven't quite updated in that tool where I'm like, what is actually happening?
the screen reader has the last word. So in terms of user impact and what, what we should care about, like if you're kind of going back and forth with team members who are reporting issues that they find with tooling, what should ultimately have the final say is what's happening in the screen reader?
Because that's going to impact a user a lot more than a tool like lighthouse or the web developer toolbar. Like those are tools that we use to help us uncover information. They are not the kind of end all be all for you know, passing WCAG or for making a good user experience. Validating it in the screen.
Reader is ultimately the most important thing that we can do. Okay, so to get outta the rotor, I'm gonna hit escape where to you are currently on a tax element and to close voiceover. The quickest way is click this little X down here. I can also do function command F five to turn it off F five button voiceover off.
So I hit it once to kind of get into that exit. And then I double tap on the button to turn it off. But you can also click that little X, if you can see it, it's nice to have a keyboard command in case, you know, there's plenty of blind people who are using voiceover and they're not gonna be able to see that little X down there.
So one thing I like about voiceover is that it shows us that readout at the bottom. So that's really helpful to see kind of what accessibility information is being piped through to the screen reader.
Improve the MegaNav Experience in VoiceOver
There are several fixes that could be made to the page to provide a better screen reader experience.
Updating the semantic structure of would be a good thing to do. If you’re interested in implementing these fixes, check out the Improving VoiceOver Announcements lesson.
Testing VoiceOver after Improving Semantic Structure
After making updates
Video Transcript
So let's go over to safari and I'm gonna hit refresh, get everything up to date. So it's looking better. There's a little teeny gap here between the menu buttons and the sub menu. I'm not gonna worry about that right now, but that could be an easy CSS fix.
It might be display and line block, or, you know, some sort of little style treatment, but it doesn't affect the screen reader functionality. So I'm gonna ignore it for the moment to turn voiceover back on. I will do function command F five voiceover on safari camp's window camps. Web content has keyboard focus, visited link camp spots, banner you plan your trip menu, popup button navigation.
So here that menu popup button navigation, and I cut it off before it could say you are currently on a heading level two. So I'll go to the next one ways to stay menu popup button. You are currently on a heading level two. So what that does is indicate to us that there is a popup button here that has something attached to it, and it's a heading level.
So it's kind of an important part of the page. It's got some semantic structure to it. So now if I open this using the return key ways to stay menu popup button, it doesn't really say anything about already expanded, but the popup button is telling us something. So that's really cool. Now our expanded support is kind of mixed.
I think it works a little bit better in N VDA or jaws, but I think we could use it anyway. It's still a really awesome programmatic attribute to add. And so if I arrow down into the content now in the sub menu, it has way more semantic structure stay heading level three trip types. You are link tent, camping.
You are currently on a tax element. You are camping. You are currently on a tax element, van camping. You are currently on a tax element, link, luxury lamping link events, list, two items. So there we get that events list, two items. So that structure that we added with the list that's where it gives us a bit more of that detail.
And so if I come back to the toggle buttons, link, link, link, link ways to stay menu popup, button navigation, ways to stay menu popup button. Yeah. It sure doesn't read out that our expanded does it. But it's still an improvement. Like we know that there's something attached to this mega menu. There's more structure in the menu itself, which is really cool and that I would add.
I'm gonna continue down the page so we can test that modifiers, circumflex thing that we saw, which for some reason, isn't showing up here in the menu.
So I'm glad I didn't really bother with that fix, but it did affect that link list further down the page. So let's go down there. Resources, menu, popup button link login, banner tri Oregon, Colorado edit tech, enter dates, edit text blank, search button link, New York. You are currently on a link to click this all right, link, New York.
We don't get that modifiers circumflex stuff anymore. So that's a huge improvement. I mean it's in terms of user blocking stuff, like we did get some of the major things out of the way, like adding alt text adding button text to things. So we'd already done things for the screen reading experience before we ever got to the step, which is why I love testing with extensions and dev tools.
Cuz you can fix a lot of the low hanging fruit before you get into your screen reader testing pass. Now there's still some things that we could fix. If I scroll up here are input, text fields, for example, are not using label elements quite yet, but they do have placeholders. So it did give us something.
It's not the best experience and I'll tell you why I'll exit out of voiceover voiceover off. When I click on these, what obviously look like labels to me, I click on them. My focus does not go into these text inputs. And also when I start typing, like if I had a date picker that popped up here or I wanna type in, you know, I wanna go to New Zealand, the placeholder text goes away.
And so placeholder alone is not a great thing to rely on. It does so happen that we have text here that could be a label element. So let's fix that real quick. Let's get that satisfaction. Cuz it's a really important thing to, to fix when we're talking about screen reader usage.
Video Transcript
And so in the screen reader, now let's fire voiceover back up one more time. I'll hit refresh and do function command F five voiceover on safari camp's window camp visited link plan ways to resources linked where to try Oregon, Colorado edit text. Dates enter dates, edit text. You are currently on where to try Oregon, Colorado.
So that really does work better now that it says where to, and then it reads the placeholder. So we get the benefit of the label text and the placeholder text combined, if it was something like a telephone field and the number was phone number or social security number, like those are quite different.
And if the placeholder just had the format, you might be like what is this field for? And so the label text describes what the field is for the placeholder is usually an example of content that can go into it. And that becomes really relevant in our screen reader testing. And so with voiceover, we've found a lot of the underlying accessibility information that could be missing if we only tested with the keyboard we were able to find a lot of stuff with lighthouse and ax.
So we can get a lot of that low hanging fruit before we ever get to screen reader testing. But there's really no substitute, like, as I was mentioning, kind of the final say should go to the screen reader, like, what are the headings doing?
You know, what's actually being read out in the screen readers for the browsers that we support. And so it can be really helpful tool. So yeah, that's a voice over voice over off, we've made some changes.